import React, { useState, useEffect } from "react";
import { Link, history } from "umi";
import "./warranty.less";
import {
  Breadcrumb,
  Select,
  DatePicker,
  Button,
  Table,
  Space,
  message,
} from "antd";
import axios from "axios";
import dayjs from "dayjs";

export default function WarrantyManagement() {
  const { RangePicker } = DatePicker;
  let date = ["今日", "昨日", "最近7天", "最近30天"];
  const columns = [
    {
      title: "保修房屋",
      dataIndex: "bxfw",
    },
    {
      title: "维修项目",
      dataIndex: "wxxm",
    },
    {
      title: "标题",
      dataIndex: "ts",
    },
    {
      title: "报修人",
      dataIndex: "bxr",
    },
    {
      title: "预约日期",
      dataIndex: "date",
      render: (_, record) => {
        return dayjs(record.date).format("YYYY-MM-DD");
      },
    },
    {
      title: "维修状态",
      dataIndex: "wxzt",
      render: (_, record) => (
        <span style={{ color: record.wxzt === 1 ? "green" : "red" }}>
          {record.wxzt === 1 ? "已预约" : "未预约"}
        </span>
      ),
    },
    {
      title: "操作",
      dataIndex: "cz",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => history.push(`/warrdetail?id=${record._id}`)}>
            详情
          </a>
          <a onClick={() => del(record._id)}>删除</a>
        </Space>
      ),
    },
  ];
  let [delarr, setdelarr] = useState([]);
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setdelarr(selectedRowKeys);
    },
  };
  let [warrls, setwarrls] = useState([]);
  useEffect(() => {
    getwarr();
  }, []);
  let getwarr = async () => {
    let {
      data: { code, warls },
    } = await axios.get(
      `http://localhost:3000/getwarranty?bxfw=${bxfw}&wxzt=${wxzt}&startdate=${startDate}&endDate=${endDate}`
    );
    if (code == 200) {
      setwarrls(warls);
    }
  };

  let delall = async()=>{
    let {data:{code}} = await axios.post(`http://localhost:3000/delallwarr`,delarr)
    if(code===200){
      message.success("删除成功")
      getwarr()
    }
  }

  const [selectionType, setSelectionType] = useState("checkbox");
  let [page, setpage] = useState(1);
  let [pageSize, setpageSize] = useState(8);
  let [bxfw, setbxfw] = useState("");
  let [wxzt, setwxzt] = useState("");
  let [startDate, setStartDate] = useState("");
  let [endDate, setEndDate] = useState("");
  let search = () => {
    getwarr();
  };

  let del = async (id) => {
    let {
      data: { code, msg },
    } = await axios.delete(`http://localhost:3000/delwarr?id=${id}`);
    if (code === 200) {
      message.success(msg);
      getwarr();
    }
  };
  return (
    <div className="bigbox">
      <div className="header">
        <div className="header1">
          <Breadcrumb
            items={[
              {
                title: "物业服务",
              },
              {
                title: "报修管理",
              },
            ]}
          />
          <h2>报修管理</h2>
          <hr />

          {/* 头部类型 */}
          <div style={{ height: "50px", lineHeight: "50px" }}>
            <span>住户类型</span>
            <Select
              defaultValue="全部"
              onChange={(e) => {
                setbxfw(e);
              }}
              style={{ width: 240, marginLeft: "30px" }}
              options={[
                { value: "", label: "全部" },
                { value: "One111", label: "业主" },
                { value: "Thre", label: "亲戚" },
                { value: "Two222", label: "租户" },
                { value: "Three333", label: "朋友" },
              ]}
            />
            <span style={{ display: "inline-block", marginLeft: "50px" }}>
              保修状态
            </span>
            <Select
              defaultValue="全部"
              onChange={(e) => {
                setwxzt(e);
              }}
              style={{ width: 240, marginLeft: "20px" }}
              options={[
                { value: "", label: "全部" },
                { value: 1, label: "已预约" },
                { value: 2, label: "未预约" },
              ]}
            />
          </div>

          <div style={{ height: "60px", lineHeight: "60px" }}>
            <span>预约日期</span>
            <RangePicker
              style={{ width: 270, marginLeft: "20px" }}
              onChange={(e) => {
                setStartDate(dayjs(e[0].$d).format("YYYY-MM-DD"));
                setEndDate(dayjs(e[1].$d).format("YYYY-MM-DD"));
              }}
            />
            {date.map((item) => (
              <span
                key={item}
                style={{ display: "inline-block", marginLeft: "50px" }}
              >
                {item}
              </span>
            ))}
            <Button
              style={{ marginLeft: "60px", width: "80px", height: "40px" }}
              type="primary"
              onClick={search}
            >
              查询
            </Button>
            <Button
              style={{ marginLeft: "10px", width: "80px", height: "40px" }}
              onClick={() => {
                setbxfw(""), setwxzt(""), setStartDate(""), getwarr();
              }}
            >
              清空
            </Button>
          </div>
        </div>
      </div>
      <div className="content">
        <div className="content1">
          <p>
            <span>保修列表</span>
            <Button
              style={{ marginLeft: "720px", width: "90px", height: "40px" }}
              type="primary"
              onClick={() => {
                history.push("/addwarr");
              }}
            >
              {" "}
              + 新建
            </Button>
            <Button
              style={{ marginLeft: "10px", width: "100px", height: "40px" }}
              onClick={delall}
            >
              批量删除
            </Button>
          </p>
          <Table
            columns={columns}
            dataSource={warrls}
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            pagination={{
              current: page,
              pageSize: pageSize,
              total: warrls.length,
              onChange: (page, pageSize) => {
                setpage(page);
                setpageSize(pageSize);
              },
              pageSizeOptions: [8, 10, 15, 20, 30],
              showSizeChanger: true,
              showQuickJumper: true,
            }}
            rowKey={"_id"}
          />
        </div>
      </div>
    </div>
  );
}
